<template>
  <div class="home">
    <home-header></home-header>
    <home-swiper :swiperList="swiperList" ></home-swiper>
    <home-icons :iconsList="iconsList"></home-icons>
    <home-recommend :recommendList="recommendList"></home-recommend>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>

<script>
import HomeHeader from "./components/Header";
import HomeSwiper from "./components/Swiper";
import HomeIcons from "./components/Icons";
import HomeRecommend from "./components/Recommend";
import HomeWeekend from "./components/Weekend";
import axios from "axios";
import { mapState } from "vuex";

export default {
  name: "home", //这里相当于js模块的导出
  components: {
    "home-header": HomeHeader,
    "home-swiper": HomeSwiper,
    "home-icons": HomeIcons,
    "home-recommend": HomeRecommend,
    "home-weekend": HomeWeekend
  },
  data() {
    return {
      lastCity: "",
      city: "",
      iconsList: [],
      recommendList: [],
      swiperList: [],
      weekendList: []
    };
  },
  methods: {
    getHomeInfo: function(city) {
      axios
        .get("/index.json?city=" + this.$store.state.city)
        .then(res => {
          if (res.data.ret === "true" && res.data.data) {
            var data = res.data.data;
            this.city = data.city;
            this.iconsList = data.iconsListp;
            this.recommendList = data.recommendList;
            this.swiperList = data.swiperList;
            this.weekendList = data.weekendList;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  computed: {
    ...mapState({
      curCity: "city"
    })
  },
  mounted: function() {
    this.getHomeInfo();
    this.lastCity = this.curCity;
  },
  activated: function() {
    if (this.lastCity !== this.curCity) {
      this.getHomeInfo(this.curCity);
      this.lastCity = this.curCity;
    }

   window.addEventListener('beforeunload', function(){
        window.scrollTo(0,0);
   })
    
  },
  deactivated: function() {
    
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/variables.styl';
@import '~styles/mixins.styl';

.home {
  background-color: $bgColor;
}
</style>